<template>
  <div class="title">各烈度区面积</div>
  <div class="chartbox" ref="chartRef"> </div>
</template>  
  
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

function convertToRoman(num) {
  const romanNumerals = [
    { value: 1000, symbol: 'M' },
    { value: 900, symbol: 'CM' },
    { value: 500, symbol: 'D' },
    { value: 400, symbol: 'CD' },
    { value: 100, symbol: 'C' },
    { value: 90, symbol: 'XC' },
    { value: 50, symbol: 'L' },
    { value: 40, symbol: 'XL' },
    { value: 10, symbol: 'X' },
    { value: 9, symbol: 'IX' },
    { value: 5, symbol: 'V' },
    { value: 4, symbol: 'IV' },
    { value: 1, symbol: 'I' }
  ]
  let romanNum = ''
  for (let i = 0; i < romanNumerals.length; i++) {
    while (num >= romanNumerals[i].value) {
      romanNum += romanNumerals[i].symbol
      num -= romanNumerals[i].value
    }
  }
  return romanNum
}

const chartRef = ref(null)
let myChart = null
// 初始化图表
const initChart = (s, x) => {
  if (s.length === 0) return
  if (chartRef.value) {
    myChart = echarts.init(chartRef.value)
    const option = {
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: 40,
        containLabel: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        }
      },
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: [
        {
          type: 'category',
          name: '平方公里',
          nameTextStyle: {
            color: '#ffffff'
          },
          axisLabel: {
            margin: 10,
            color: '#B9EEFF',
            textStyle: {
              fontSize: 14,
              color: '#B9EEFF'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: x
        }
      ],
      series: [
        {
          name: '面积',
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 30,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: 'rgb(57,89,255,1)'
                },
                {
                  offset: 1,
                  color: 'rgb(46,200,207,1)'
                }
              ])
            }
          },
          barWidth: 20,
          data: s
        }
      ]
    }
    myChart.setOption(option)
    // 指定图表的配置项和数据
  }
}

const getData = (e, x) => {
  initChart(e, x)
}
// 主动暴露childMethod方法
defineExpose({ getData })

// 组件挂载后初始化图表
onMounted(() => {
  window.addEventListener('resize', () => {
    myChart && myChart.resize()
  })
})

// 组件卸载时销毁图表实例，避免内存泄漏
onUnmounted(() => {
  if (chartRef.value) {
    echarts.dispose(chartRef.value.getEchartsInstance())
  }
})
</script>  
  
<style scoped>
.title {
  height: 41px;
  color: #fff;
  line-height: 41px;
  font-size: 18px;
  padding-left: 26px;
  font-weight: bold;
}
.chartbox {
  height: calc(100% - 41px);
}
</style>